<template>
  <div>
    <h1>v-for渲染列表案例</h1>
    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>地址</th>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.sex }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.address }}</td>
      </tr>
    </table>
  </div>
</template>
<script setup>
import { ref } from "vue";
const list = ref([
  { id: 1, name: "张三", sex: "男", age: 18, address: "北京" },
  { id: 2, name: "李四", sex: "女", age: 19, address: "上海" },
  { id: 3, name: "王五", sex: "男", age: 20, address: "广州" },
  { id: 4, name: "赵六", sex: "女", age: 21, address: "深圳" },
  { id: 5, name: "田七", sex: "男", age: 22, address: "杭州" },
  { id: 6, name: "王八", sex: "女", age: 23, address: "南京" },
  { id: 7, name: "九十", sex: "男", age: 24, address: "武汉" },
  { id: 8, name: "十一", sex: "女", age: 25, address: "成都" }
]);
</script>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}
</style>
